<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" :style="{'min-height': containerHeight + 'px'}">
            <div class="table-form-box">
                <el-form :model="formData" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="账户名">
                        <el-input v-model="formData.account" autocomplete="off" clearable readonly></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input
                            type="password"
                            v-model="formData.password"
                            autocomplete="off"
                            readonly
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="formData.name" autocomplete="off" clearable readonly></el-input>
                    </el-form-item>

                    <el-form-item label="锁定账号">
                        <el-switch
                            v-model="formData.isLock"
                            :active-value="2"
                            :inactive-value="1"
                            disabled
                        ></el-switch>
                    </el-form-item>

                    <el-form-item label="备注">
                        <el-input
                            v-model="formData.remark"
                            type="textarea"
                            maxlength="300"
                            show-word-limit
                            readonly
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="签名图片">
                        <el-image :src="formData.signature">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-form-item>

                    <el-form-item label="档案编号">
                        <el-input v-model="formData.employeeId" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-input v-model="formData.organizationName" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="岗位">
                        <el-input v-model="formData.jobName" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="上级">
                        <el-input v-model="formData.higherUpName" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-tag
                            :key="tag"
                            v-for="tag in dynamicTags"
                            :disable-transitions="false"
                        >{{tag}}</el-tag>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
import { fileUploadImage } from '../../../api/index';
import config from '../../../utils/config';
export default {
    name: 'transfer',
    data() {
        return {
            pageTitle: '',
            containerHeight: '',
            formData: {
                account: '', //用户名-账号
                higherUpAccount: '', //上级领导账号
                higherUpId: '', //上级领导ID
                higherUpName: '', //上级领导名字
                isLock: 0, //是否锁定，1 否  2锁定
                jobId: '', //岗位ID
                jobName: '', //岗位名字
                name: '', //姓名
                organizationId: '', //组织ID
                organizationName: '', //组织名
                password: '', //
                remark: '', //
                roles: [], //角色id
                signature: '', //签名照片
                employeeId: '', //关联档案id
                employeeStatus: 1 //人事档案:1新增档案
            },
            dynamicTags: [],
            isEdit: false,
            editId: '',
            editStatus: false
        };
    },
    created() {
        // 如果有id就是跳转过来修改的
        if (this.$route.query.id) {
            this.editId = this.$route.query.id;
            this.isEdit = true;
            this.editStatus = true;
            this.getData(); // 获取要修改的数据
        } else {
            this.$router.push({
                path: '/useraccountList' //跳转的路径
            });
        }
    },
    methods: {
        getData() {
            appMain
                .accountFindById({}, this.editId)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.formData = res.data.data;

                        for (const key in this.formData.roles) {
                            this.dynamicTags.push(this.formData.roles[key].roleName);
                        }
                        //获取人员档案附件
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 160;
        this.pageTitle = this.$router.currentRoute.meta.title;
        // console.log(this.$router, 'router')
    }
};
</script>

<style lang="css" scoped>
.container {
    padding-bottom: 50px;
}
.handle-box {
    /* padding: 5px 50px; */
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}

.el-image {
    height: 60px;
    width: 180px;
    border: 1px solid #000;
}

.el-tag + .el-tag {
    margin-left: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.el-input {
    max-width: 600px;
}
.el-textarea {
    max-width: 600px;
}
</style>
